<template>
  <section>
    <div
      class="border_node_btn"
      style="height:480px;margin-top: 10px;overflow-x: hidden;"
    >
      <el-tree
        :data="steps"
        default-expand-all
        show-checkbox
        node-key="id"
        ref="tree"
        class="node_tree"
        :expand-on-click-node="false"
        @check-change="leftCheckChange"
        :props="defaultProps"
      >
        <el-row class="custom-tree-node step_node" slot-scope="{ node, data }">
          <el-col>
            <span style="margin-left: 5px;" class="node_item">{{
              data.stepName
            }}</span>
          </el-col>
        </el-row>
      </el-tree>
    </div>
    <div style="margin-top: 20px;text-align: right">
      <el-button @click="executeData" type="primary"
        ><i class="el-icon-s-promotion" style="margin-right: 5px;"></i>确定
      </el-button>
    </div>
  </section>
</template>

<script>
import _ from "lodash";

export default {
  name: "stepSelect",
  components: {},
  props: {
    nodes: {
      type: Array,
      default: []
    },
    // 是否多选
    isMulSelect: {
      type: Boolean,
      default: true
    },
    // 选择类型，SINGLE单选，MORE_FIRST多选 (默认选中第一个),MORE_ALL多选 (默认全部选中),MORE_NONE多选 (默认全部不选中)
    selectType: {
      type: String,
      default: "SINGLE"
    }
  },
  data() {
    return {
      steps: [],
      checkedSteps: [],
      defaultProps: {
        children: "children",
        label: "nodeName"
      }
    };
  },
  mounted() {
    this.steps = _.clone(this.nodes);
    if (this.steps) {
      this.steps.map(item => {
        this.$set(item, "limitSelectTime", "");
        this.$set(item, "member", item.behavior.defaultHandler);
      });
    }
    this.setChecked();
  },
  watch: {
    nodes: {
      handler(val) {
        console.log(val);
        if (val && val.length > 0) {
          this.steps = _.cloneDeep(val);
          console.log(this.steps, "steps");
        }
      },
      deep: true
    },
    checkedSteps: {
      handler(val) {
        console.log(val);
        if (val && val.length > 0) {
          let tem = [];
          val.map(item => {
            tem.push({
              id: item.id
            });
          });
          console.log(tem, "steps");
          this.$emit("input", tem);
        }
      },
      deep: true
    }
  },
  methods: {
    // 根据类型，默认选择的设置
    setChecked() {
      console.log(this.selectType);
      switch (this.selectType) {
        case "MORE_FIRST":
          this.$refs.tree.setCheckedKeys([this.steps[0].id]);
          break;
        case "MORE_ALL":
          let tem = [];
          if (this.steps) {
            this.steps.map(item => {
              tem.push(item.id);
            });
          }

          this.$refs.tree.setCheckedKeys(tem);
          break;
        case "MORE_NONE":
          break;
      }
    },
    //左侧多选事件
    leftCheckChange(data, checked, node) {
      if (this.selectType === "SINGLE") {
        console.log(this.selectType, "dddd");
        // 单选
        let res = this.$refs.tree.getCheckedNodes();
        let currCheckedNode = []; //当前选中的节点
        let resultCheckedNode = []; //最终选中的节点
        res.forEach(item => {
          currCheckedNode.push(item.id);
        });
        if (checked) {
          this.$refs.tree.setCheckedKeys([data.id]);
          //清除上次的选择，重新记录本次选中的节点
          // currCheckedNode.forEach(item => {
          //   if (!arrayContains(this.checkedSteps, item)) {
          //     resultCheckedNode.push(item);
          //   }
          // });
          // console.log(resultCheckedNode)
          // this.$refs.tree.setCheckedKeys(resultCheckedNode);

          // } else {
          //   this.checkedSteps = [];
          // }
          // this.checkedSteps = [
          //   ...new Set(currCheckedNode.concat(resultCheckedNode))
          // ];
          //
          // //数组是否包含指定元素
          // function arrayContains(array, id) {
          //   for (let i = 0; i < array.length; i++) {
          //     if (array[i] == id) return true;
          //   }
          //   return false;
          // }
        }
      }
      this.checkedSteps = this.$refs.tree.getCheckedNodes();
    },
    executeData() {
      let val = this.$refs.tree.getCheckedNodes();
      if (val && val.length > 0) {
        let tem = [];
        val.map(item => {
          tem.push({
            id: item.id,
            member: item.member,
            limitTime: item.limitSelectTime
          });
        });
        console.log(tem, "steps1111111111111111");
        this.$emit("input", tem);
        this.$emit("executeData", tem);
      } else {
        this.warning("请至少选择一个步骤");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.node_tree {
  /deep/ .el-tree-node__content {
    height: auto !important;
  }

  /deep/ .el-tree-node__content:hover {
    background-color: #ecf5ff;
  }

  .node_item {
    line-height: 50px;
    height: 50px;
  }

  .custom-tree-node {
    width: 95%;
  }
}
</style>
